
<!-- saved from url=(0052)https://www.crockford.com/javascript/prototypal.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Prototypal Inheritance</title>
<style>
body {background-color: linen; margin: 8%;}
th {background-color: thistle; border: black solid 1px; text-align: left;
    padding-left: 10px; padding-right: 10px; vertical-align: top;}
td {background-color: white; border: black solid 1pt; padding-left: 10px;
    padding-right: 10px; vertical-align: top;}
table {margin: 10px; float:right; border: 0px; cellpadding: 0px;}
p {margin: 10px}
pre {margin-left: 40px}
</style>
</head>
<body>
<h1 align="center">Prototypal Inheritance in JavaScript</h1>
<p></p>
<p align="center"><a href="mailto:douglas@crockford.com"><font size="+1">Douglas
Crockford</font></a><br>
  <a href="http://www.crockford.com/" target="_top"><tt>www.crockford.com</tt></a></p>
<p>&nbsp;</p>
<p>Five years ago I wrote <a href="https://www.crockford.com/javascript/iinheritance.html">Classical
    Inheritance in JavaScript</a> <small>(<a href="http://javascript.crockford.com/zh/inheritance.html">Chinese</a> <a href="http://eineki.wordpress.com/2009/10/13/ereditarieta-classica-in-javascript/">Italian</a> <a href="http://d.hatena.ne.jp/brazil/20051011/1129031224">Japanese</a>)</small>. It showed that JavaScript is a class-free, prototypal language, 
  and that it has sufficient expressive power to simulate a classical system. 
  My programming style has evolved since then, as any good programmer's should. 
  I have learned to fully embrace prototypalism, and have liberated myself from 
  the confines of the classical model.</p>
<p>My journey was circuitous because JavaScript itself is conflicted 
  about its prototypal nature. In a prototypal system, objects inherit from objects. 
  JavaScript, however, lacks an operator that performs that operation. Instead 
  it has a <code>new</code> operator, such that</p>
<p align="center"><code>new </code><var>f</var><code>()</code></p>
<p>produces a new object that inherits from</p>
<p align="center"><var>f</var><code>.prototype</code></p>
<p>This indirection was intended to make the language seem more familiar to classically 
  trained programmers, but failed to do that, as we can see from the very low 
  opinion Java programmers have of JavaScript. JavaScript's constructor pattern 
  did not appeal to the classical crowd. It also obscured JavaScript's true prototypal 
  nature. As a result, there are very few programmers who know how to use the 
  language effectively.</p>
<p>Fortunately, it is easy to create an operator that implements true 
  prototypal inheritance. It is a standard feature in my toolkit, and I highly 
  recommend it for yours.</p>
<pre>    function object(o) {
        function F() {}
        F.prototype = o;
        return new F();
    }
</pre>
<p>The <code>object</code> function untangles JavaScript's constructor pattern, 
  achieving true prototypal inheritance. It takes an old object as a parameter 
  and returns an empty new object that inherits from the old one. If we attempt 
  to obtain a member from the new object, and it lacks that key, then the old 
  object will supply the member. Objects inherit from objects. What could be more 
  object oriented than that?</p>
<p>So instead of creating classes, you make prototype objects, and then use the 
  <code>object</code> function to make new instances. Objects are mutable in JavaScript, 
  so we can augment the new instances, giving them new fields and methods. These 
  can then act as prototypes for even newer objects. We don't need classes to 
  make lots of similar objects. </p>
<p>For convenience, we can create functions which will call the <code>object</code> 
  function for us, and provide other customizations such as augmenting the new 
  objects with <a href="https://www.crockford.com/javascript/private.html">privileged</a> functions. I sometimes call 
  these <i>maker</i> functions. If we have a maker function that calls another 
  maker function instead of calling the <code>object</code> function, then we 
  have a <i>parasitic</i> inheritance pattern.</p>
<p>I have found that by using these tools, coupled with JavaScript's lambdas and 
  object quasi-literals, I can write well-structured programs that are large, 
  complex, and efficient. The classical object model is by far the most popular 
  today, but I think that the prototypal object model is more capable and offers 
  more expressive power. </p>
<p>Learning these new patterns also made me a better classical programmer. 
  Insights from the dynamic world can have application in the static.</p>
<p>2006-06-07</p>
<p>&nbsp;</p>
<p>Here is another formulation:</p>
<pre>Object.prototype.begetObject = function () {
    function F() {}
    F.prototype = this;
    return new F();
};

newObject = oldObject.begetObject();</pre>
<p>2007-04-02</p>
<p>&nbsp;</p>
<p>The problem with the <code>object</code> function is that it is global, 
  and globals are clearly problematic. The problem with <code>Object.prototype.begetObject</code> 
  is that it trips up incompetent programs, and it can produce unexpected 
  results when <code>begetObject</code> is overridden.</p>
<p>So I now prefer this formulation:</p>
<pre>if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}
newObject = Object.create(oldObject);</pre>
<p>2008-04-07</p>


<div id="torrent-scanner-popup" style="display: none;"></div></body></html>